<template>
  <div class="main-content">
    <div class="AddressAdministration">
      <div class="AddressAdministration-header">
        <div>
          <el-input style="height: 40px;width: 215px;" v-model="input" placeholder="请输入验证码" />
          <el-button style="background-color: #fff;color: #000;border:1px solid #999;">兑换</el-button>
        </div>
      </div>
      <div class="bottom-main-header">
        <ul>
          <li v-for="(item,index) in data.navList" :class="index===data.num?'bottom-border':''" @click="bordeClick(index)">
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="bottom-main-content">
        <div v-show="data.list.length===0">
          <img src="/images/personalCenter/noOrder.png">
          <p>暂无优惠卷</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import {reactive} from "vue";

  let data = reactive({
    navList:[
      {name: '已使用'},
      {name: '未使用'}
    ],
    num:0,
    list:[]
  })
  let bordeClick = (index)=>{
    data.num = index
  }
</script>

<style lang="less" scoped>
.main-content {
  width: 1034px;
  height: 100%;
  .AddressAdministration {
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 #eaeaea;
    padding: 35px 50px;
    min-height: 100%;
    .AddressAdministration-header {
      margin-bottom: 25px;
      div {
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
        div {
          position: relative;
          font-size: 14px;
          display: inline-block;
          width: 100%;
          height: 40px;
        }
      }
    }
    //订单导航
    .bottom-main-header {
      ul {
        display: flex;
        height: 57px;
        background: #f6f6f6;
        align-items: center;
        justify-content: space-around;
        li {
          height: 100%;
          cursor: pointer;
          line-height: 57px;
          font-size: 18px;
          box-sizing: border-box;
        }
        .bottom-border {
          color: #000;
          border-bottom: 2px solid #000;
        }
      }
    }
    //订单内容
    .bottom-main-content {
      text-align: center;
      margin-top: 36px;
      padding-bottom: 58px;
      padding-right: 55px;
      padding-left: 55px;
      div {
        margin-top: 150px;
        padding-bottom: 58px;
        img {
          width: 138px;
          height: 138px;
          margin: 0 auto;
        }
        p {
          text-align: center;
        }
      }
    }
  }
}
</style>